<template>
	<view class="page">
		<view class="background-view"></view>
		<view class="userInfo-box">
			<image class="userImage"
				src="https://thirdwx.qlogo.cn/mmopen/vi_32/1gl3IGGx7B25fXLr12gtw96ZbyXtltdibJoibZHWA0QMVX50WZpsqTcIDHiaRP9XnFYXn7DogwFzFIibqW0b7mEWAg/132">
			</image>
			<view class="user-text">
				<view id="name" v-model="riderName" class="view-item text-overflow">
					{{riderName}}
				</view>
			</view>
		</view>
		<view class="user-info-card">
			<!-- <view class="item" @click="tomoney">
				<image src="https://express-rider-1303869346.cos.ap-chengdu.myqcloud.com/static/image/mine_icon/wallet.png" class="item_image" mode="aspectFit"></image>
				<view class="item-1 text-overflow">我的钱包</view>
			</view> -->
			<view class="item" @click="skipMethod(1)">
				<image
					src="https://express-rider-1303869346.cos.ap-chengdu.myqcloud.com/static/image/mine_icon/analysis.png"
					class="item_image" mode="aspectFit"></image>
				<view class="item-1 text-overflow">订单统计</view>
			</view>
			<!-- 	<view class="item">
				<image
					src="https://express-rider-1303869346.cos.ap-chengdu.myqcloud.com/static/image/mine_icon/grade.png"
					class="item_image"
					mode="aspectFit"
					style="width: 20px !important;height: 20px !important"
				></image>
				<view class="item-1 text-overflow">他人评分</view>
			</view> -->
		</view>
		<view class="list-box">
			<view class="box">
				<view class="box-title">
					<view class="text1">我的服务</view>
				</view>
				<view class="box-content">
					<!-- <view class="item" @click="skipMethod(1)">
						<view class="item1 flex-center">
							<image
								src="https://express-rider-1303869346.cos.ap-chengdu.myqcloud.com/static/image/mine_icon/promotion.png"
								style="width: 45rpx;height: 45rpx;"
							></image>
						</view>
						<view class="item2 text-overflow flex-center">我的推广</view>
					</view> -->
					<view class="item" @click="skipMethod(2)">
						<view class="item1 flex-center">
							<image
								src="https://express-rider-1303869346.cos.ap-chengdu.myqcloud.com/static/image/mine_icon/personinf.png"
								style="width: 53rpx;height: 53rpx;"></image>
						</view>
						<view class="item2 text-overflow flex-center">实名认证</view>
					</view>
					<!-- <view class="item" @click="skipMethod(3)">
						<view class="item1 flex-center">
							<image
								src="https://express-rider-1303869346.cos.ap-chengdu.myqcloud.com/static/image/mine_icon/service.png"
								style="width: 43rpx;height: 43rpx;"
							></image>
						</view>
						<view class="item2 text-overflow flex-center">客服</view>
					</view> -->
					<!-- <view class="item" @click="skipMethod(4)">
						<view class="item1 flex-center">
							<image src="https://express-rider-1303869346.cos.ap-chengdu.myqcloud.com/static/image/mine_icon/appeal.png" style="width: 42rpx;height: 42rpx;"></image>
						</view>
						<view class="item2 text-overflow flex-center">申诉</view>
					</view> -->
					<view class="item" @click="skipMethod(5)">
						<view class="item1 flex-center">
							<image
								src="https://express-rider-1303869346.cos.ap-chengdu.myqcloud.com/static/image/mine_icon/exitlogin.png"
								style="width: 43rpx;height: 43rpx;"></image>
						</view>
						<view class="item2 text-overflow flex-center">退出登录</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	//import {  } from "@/common/api/{$}.js";
	import amap from "@/libs/amap-wx.130.js";
	import {
		baseUrl
	} from "../../libs/request.js"
	export default {
		data() {
			return {
				nickName: '',
				latitude: '',
				longitude: '',
				key: '0a1e26c6705378ca402b54fd90249684',
				riderInfo:{},
				riderName:'',
		};
	},
	//监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad
	onInit() {},
	//监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
	onLoad(option) {
		// const riderInfo = uni.getStorageSync('riderInfo')
		this.riderInfo= uni.getStorageSync('riderInfo')
		console.log("我的界面：",this.riderInfo)
		if(this.riderInfo.riderName==null||this.riderInfo.riderName==""){
			this.riderName=this.riderInfo.phone
			console.log("显示手机号！")
		}else{
			this.riderName=this.riderInfo.riderName
				console.log("显示姓名！")
			// this.$data.phone = riderInfo.phone
		}
	this.getAddress();
	},
	//监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
	onReady() {},
	//监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
	beforeDestroy() {},
	//页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。
	onReachBottom() {},
	onShareAppMessage(res) {},
	created() {},
	methods: {
		// tomoney() {
		// 	uni.navigateTo({
		// 		url: '../money'
		// 	});
		// },
		// 跳转页面
		skipMethod(param) {
			switch (param) {
				case 1:
					uni.navigateTo({
						url:'../orderStaties/orderStaties'
					});
					break;
				case 2:
					uni.request({
						url:baseUrl+"/rider/realInfo",
						method: 'POST',
						data: {
							riderId:uni.getStorageSync("riderInfo").riderid,				
						},
						header: {
							"Content-Type": "application/x-www-form-urlencoded"
						},
						success: (res) => {
							uni.setStorageSync("riderInfo",res.data.riderInfo)
							console.log("实名认证数据",uni.getStorageSync("riderInfo",res.data.riderInfo))
							uni.navigateTo({
								url: `./authentication`
							});
						}
					})					
					break;
				case 3:
					uni.navigateTo({
						url: './service'
					});
					break;
				case 4:
					console.log('——莫泊桑 《一生》');
					break;
				case 5:
				// this.$data.riderName='';
				uni.navigateTo({
					url: '../login/login'
				});
					// console.log('那像大西洋一样蔚蓝的眼睛，使我像泰坦尼克号般不受控制地沉溺其中');
					break;
			}
			this.takePhoto()
		},
		//监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		//监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		beforeDestroy() {},
		//页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。
		onReachBottom() {},
		onShareAppMessage(res) {},
		created() {},
		methods: {
			// tomoney() {
			// 	uni.navigateTo({
			// 		url: '../money'
			// 	});
			// },
			// 跳转页面
			skipMethod(param) {
				switch (param) {
					case 1:
						uni.navigateTo({
							url: '../orderStaties/orderStaties'
						});
						break;
					case 2:
						uni.request({
							url: baseUrl + "/rider/realInfo",
							method: 'POST',
							data: {
								riderId: uni.getStorageSync("riderInfo").riderid,
							},
							header: {
								"Content-Type": "application/x-www-form-urlencoded"
							},
							success: (res) => {
								uni.setStorageSync("riderInfo", res.data.riderInfo)
								console.log("实名认证数据", uni.getStorageSync("riderInfo", res.data.riderInfo))
								uni.navigateTo({
									url: `./authentication`
								});
							}
						})
						break;
					case 3:
						uni.navigateTo({
							url: './service'
						});
						break;
					case 4:
						console.log('——莫泊桑 《一生》');
						break;
					case 5:
						// this.$data.riderName='';
						uni.navigateTo({
							url: '../login/login'
						});
						// console.log('那像大西洋一样蔚蓝的眼睛，使我像泰坦尼克号般不受控制地沉溺其中');
						break;
				}
			},
			getAddress() {
				const _this = this;
				_this.amapPlugin = new amap.AMapWX({
					key: this.key
				});
				uni.showLoading({
					title: '获取信息中'
				});
				// 成功获取位置
				_this.amapPlugin.getRegeo({
					success: (data) => {
						console.log(data, '当前定位')
						// _this.address = `${data[0].regeocodeData.addressComponent.city}${data[0].regeocodeData.addressComponent.district}`;
						// uni.setStorageSync("address",data[0].regeocodeData.addressComponent.district);
						console.log("当前地址", data[0].regeocodeData.addressComponent.district)
						_this.latitude = data[0].latitude
						_this.longitude = data[0].longitude
						uni.request({
							// 192.168.2.111 本机ip  localhost
							url: baseUrl + "/riderOrder/getShopsId",
							method: 'POST',
							data: {
								lat: _this.latitude,
								lng: _this.longitude
							},
							header: {
								"Content-Type": "application/x-www-form-urlencoded"
							},
							success: (res) => {
								console.log(res);
								if (res.data.shopsId != 0) {
									_this.shopsId = res.data.shopsId
									uni.setStorageSync("shopsId", _this.shopsId);
								} else {
									uni.setStorageSync("shopsId:", 0);
									uni.showToast({
										title: "您目所在的区域没有分店,请联系客服",
										icon: "none",
										duration: 5000,
									})
								}
							}
						})
						uni.hideLoading();
					},
					// 获取位置失败
					fail: (err) => {
						uni.showToast({
							title: "获取位置失败，请重启小程序",
							icon: "none"
						})
					}
				});
			},
			show() {
				const _this = this;
				this.amapPlugin = new amap.AMapWX({
					key: this.key
				});
				_this.amapPlugin.getRegeo({
					success: (data) => {
						console.log(data, '当前定位')
						// _this.address = `${data[0].regeocodeData.addressComponent.city}${data[0].regeocodeData.addressComponent.district}`;
						// uni.setStorageSync("address",data[0].regeocodeData.addressComponent.district);
						console.log("当前地址", data[0].regeocodeData.addressComponent.district)
						this.latitude = data[0].latitude
						this.longitude = data[0].longitude
						uni.request({
							// 192.168.2.111 本机ip  localhost
							url: baseUrl + "/riderOrder/orderMap",
							method: 'POST',
							data: {
								lat: this.latitude,
								lng: this.longitude,
								riderId:this.riderInfo.riderid
							},
							header: {
								"Content-Type": "application/x-www-form-urlencoded"
							},
							success: (res) => {
								console.log(res)
							}
						})
					},
				});
			},
			takePhoto() {
				const that = this;
				setInterval(function() {
					that.show()
				}, 10000);
			}
			},
			}
		};
</script>
<style lang="scss" scoped>
	.page {
		position: relative;
		height: 100vh;
		background-color: #f2f2f2;
		animation: text linear 0.4s;
	}

	.background-view {
		height: 30%;
		background-color: #ffbd27;
		border-bottom-left-radius: 50%;
		border-bottom-right-radius: 50%;
	}

	@keyframes text {
		0% {
			transform: translate(-100%, 0);
		}

		100% {
			transform: translate(0, 0);
		}
	}

	.userInfo-box {
		top: 4%;
		position: absolute;
		width: 80%;
		left: 50%;
		transform: translate(-50%, 0);
		height: 120rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		flex-wrap: wrap;

		.userImage {
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
		}

		.user-text {
			width: 70%;
			color: white;
			font-size: 1em;

			.view-item {
				margin-top: 8rpx;
				margin-left: 20rpx;
				line-height: 2;
			}
		}

		.config {
			width: 10%;
			overflow: hidden;
			height: 100%;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.user-info-card {
		top: 18%;
		position: absolute;
		width: 80%;
		left: 50%;
		transform: translate(-50%, 0);
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 30rpx;
		background-color: white;
		border-radius: 40rpx;
		box-shadow: 0px 1px 2px #e3e3e3;

		.item_image {
			width: 24px !important;
			height: 24px !important;
		}

		.item {
			width: 35%;
			display: flex;
			align-items: center;
			flex-direction: column;
			height: 100%;

			.item-1 {
				font-size: 11px;
				width: 100%;
				text-align: center;
			}
		}
	}

	.text-overflow {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.list-box {
		// height: 380rpx;
		margin-top: 60rpx;
		padding: 30rpx;

		// background-color: lightgreen;
		.box {
			background-color: white;
			width: 100%;
			height: 90%;
			display: flex;
			flex-direction: column;
			border-radius: 20rpx;
			box-shadow: 0px 1px 2px #e3e3e3;

			.box-title {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2px solid #d8d8d8;

				.text1 {
					font-size: 15px;
					text-indent: 1em;
				}

				.text2 {
					color: #d8d8d8;
					font-size: 1.2em;
					display: flex;
					align-items: center;
					margin-right: 20rpx;

					image {
						margin-left: 20rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.box-content {
				height: 60%;
				padding: 20rpx 40rpx 40rpx 40rpx;
				display: flex;
				justify-content: start;
				flex-wrap: wrap;

				.item {
					width: 25%;
					height: 100rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;
					margin-top: 30rpx;

					.item1 {
						height: 50%;
						width: 100%;
						text-align: center;
					}

					.item2 {
						margin-top: 10rpx;
						height: 50%;
						width: 100%;
						font-size: 11px;
					}
				}
			}
		}
	}

	.flex-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
